<template>
  <div id="news">
    <NavTitle>
      <template #left>
        <div class="title">新闻资讯</div>
        <div class="info">NEWS AND INFORMATION</div>
      </template>
    </NavTitle>
    <!-- 含有封面 -->
    <div class="hasCover">
      <template v-for="item in state.artilceCoverList" :key="item._id">
        <ArrticleItemV1 :articleInfo="item"></ArrticleItemV1>
      </template>
    </div>
    <!-- 不含封面 -->
    <div class="nohasCover">
      <template v-for="item in state.articleLisList" :key="item._id">
        <ArrticleItemV2 :articleInfo="item"></ArrticleItemV2>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { NavTitle } from '@/components/client/public'
import { ArrticleItemV1, ArrticleItemV2 } from '@/components/client/news'
import {
  getEffectData,
  ArticleListDataTypes
} from '@/server/client/api_article'
import currScroll from '@/hooks/scroll'

// 记录当前浏览进度
currScroll()

// 最新发布的前五篇文章
const state = reactive({
  articleList: [] as Array<ArticleListDataTypes>,
  // 封面文章
  artilceCoverList: [] as Array<ArticleListDataTypes>,
  // 列表文章
  articleLisList: [] as Array<ArticleListDataTypes>
})

getEffectData(0, 5).then(({ data }) => {
  state.articleList = data.data.articleList
  state.artilceCoverList = state.articleList.slice(0, 2)
  state.articleLisList = state.articleList.slice(2, 5)
})
</script>

<style scoped lang="less">
#news {
  // 动画名称
  animation: fadeInUp;
  // 动画持续时间
  animation-duration: 1s;
  width: 1200px;
  margin: 0 auto;
  padding-top: 80px;
  .hasCover {
    display: flex;
    justify-content: space-between;
  }
  .nohasCover {
    margin-top: 80px;
    padding-bottom: 50px;
  }
}
</style>
